<template>
	<view class="login">
		<image src="/static/other/facelogin.png" mode=""></image>
		<button type="primary" class="btn-login"  @click="getUserInfo">一键登录</button>
		<view class="login-desc" @click="gtin">
			登录后尽享更多权益
		</view>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('m_user',['redirectInfo'])
		},
		methods:{
			...mapMutations('m_user',['updateuserinfo','updataToken','updaredirectInfo']),
			getUserInfo(e){
				// console.log(e)
				// if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg("你取消的登录授权")
				// this.updateuserinfo(e.detail.userInfo)
				uni.getUserProfile({
					desc:"获取信息",
					success: (res) => {
						console.log(res.userInfo)
						this.updateuserinfo(res.userInfo)
						this.getToken(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})
				
			},
			async getToken(info){
				const [err,res] =  await uni.login().catch(err=>err)
				if(err || res.errMsg!='login:ok') return uni.$showMsg("登录失败")
				console.log(res)
				const query = {
					code:res.code,
					encryptedData:info.encryptedData,
					iv:info.iv,
					rawData:info.rawData,
					signature:info.signature
				}
				this.loginnow(query)
				
			},
			async loginnow(query){
			  const {data : res} =	await uni.$http.post('/api/public/v1/users/wxlogin',query)
			  console.log(res)
			  if(res.meta.status!=200) return uni.$showMsg("登录失败！")
			  this.updataToken(res.message.token)
			  this.navigtateback()
			},
			navigtateback(){
				if(this.redirectInfo && this.redirectInfo.openType==="switchTab")
				{
					uni.switchTab({
						url:this.redirectInfo.from,
						complete: () => {
							this.updaredirectInfo(null)
						}
					})
				}
					
					
				
			}
			
		}
	}
</script>

<style>
 .login{
	 height: 750rpx;
	 /* background-color: pink; */
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 background-color: #F8F8F8;
	 position: relative;
	
 }
 .btn-login{
	 margin-top: 20px;
	 width: 80%;
	 border-radius: 25px;
	 background-color: #C00000;
 }
 .login image{
	 width: 100px;
	 height: 100px;
	 border-radius: 50%;
 }
 .login-desc{
	 margin: 6px;
	 font-size: 12px;
	 color: #ccc;
 }
 .login::after{
	 content: "";
	 display: block;
	 width: 100%;
	 height: 40px;
	 background-color: #FFFFFF;
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 border-radius: 100%;
	 transform: translateY(50%);
	 
 }
</style>
